<template>
	<view class="service-area">
		<u-notice-bar
			:text="canUseArea"
			icon="服务区域:"
			color="#707070"
			bgColor="#EBF5F8"
			fontSize="20rpx"
			:speed="50"
		/>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue';
	
	const props = defineProps({
		serviceAreaStringList: {
			type: Array,
			default: () => [],
		},
	});
	
	// 可服务区域
	const canUseArea = computed<string>(() => {
		return props.serviceAreaStringList.map((item: any) => item.area).join('、');
	});
</script>

<style lang="scss" scoped>
	.service-area {
		width: 100%;
		height: 68rpx;
		.u-notice-bar {
			position: fixed;
			bottom: 120rpx;
			left: 0;
			right: 0;
			z-index: 10;
			padding: 12rpx 26rpx;
			border-top: 1rpx solid #E9E9E9;
		}
		::v-deep .u-icon__icon {
			color: #242424 !important;
			font-size: 20rpx !important;
			line-height: 38rpx !important;
		}
	}
</style>